﻿<div id="CustomerAccountContainer">
    <div class="row">
        <label class="section">@Resources.ProductTitle @Resources.AccountSuffix</label>
    </div>

    <div class="row subscriptions-title-row">
        <label class="section">@Resources.Subscriptions</label>

        <div class="subscriptions-links">
            <a class="link" data-bind="click: onAddSubscriptionsClicked">@Resources.AddCapital</a>
            <a class="link" data-bind="click: onUpdateSubscriptionsClicked">@Resources.Update</a>
        </div>
    </div>

    <div class="row">
        <table class="subscriptions-table" cellspacing="5" cellpadding=" 5">
            <tbody>
                <tr>
                    <td>
                        @Resources.Subscription
                    </td>
                    <td>
                        @Resources.Quantity
                    </td>
                    <td class="right-aligned">
                        @Resources.MonthlyPrice
                    </td>
                </tr>
                <!-- ko foreach: viewModel.Subscriptions -->
                <tr class="medium-text">
                    <td>
                        <label data-bind="text: $data.FriendlyName"></label>
                    </td>
                    <td>
                        <label data-bind="text: $data.Quantity"></label>
                    </td>
                    <td class="right-aligned">
                        <label data-bind="text: $data.PriceDisplay"></label>
                    </td>
                </tr>
                <!-- /ko -->
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3" class="border-divider"></td>
                </tr>
                <tr class="subscriptions-total">
                    <td>
                        @Resources.Total
                    </td>
                    <td></td>
                    <td class="right-aligned">
                        <label data-bind="text: viewModel.TotalPrice"></label>
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>